// 该文件用于创建整个应用的路由器
import VueRouter from "vue-router";
// 引入组件
import AboutVue from "../pages/AboutVue.vue";
import HomeVue from "../pages/HomeVue.vue";
import NewsVue from "../pages/NewsVue.vue";
import MessageVue from "../pages/MessageVue.vue";
import DetailVue from "../pages/DetailVue.vue";

// 创建并暴露一个路由器
export default new VueRouter({
  routes: [
    // 一级路由
    {
      name: "guanyu",
      path: "/about",
      component: AboutVue,
    },
    {
      path: "/home",
      component: HomeVue,
      children: [
        {
          path: "news",
          component: NewsVue,
        },
        {
          path: "message",
          component: MessageVue,
          children: [
            {
              name: "xiangqing",
              path: "detail",
              component: DetailVue,

              // props第一种写法————对象
              // 该对象所有key-value都会以props形式传给DetailVue组件
              // props:{a:1,b:'helloworld'}

              // props第二种写法————布尔值
              // 若为真，该路由组件收到所有params参数，以props形式传给DetailVue组件
              // props: true,

              // props第三种写法————函数
              // 需要设置query传参
              props($route) {
                return { id: $route.query.id, title: $route.query.title };
              },
              // 或者解构赋值
              // props({ query }) {
              //   return { id: query.id, title: query.title };
              // },
              // },
            },
          ],
        },
      ],
    },
  ],
});
